<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-form-item label="操作选择" prop="title">
            <el-input v-model="ruleForm.type" />
        </el-form-item>
        <el-form-item label="工序名称" prop="schedule_id">
            <el-input v-model="ruleForm.schedule_id" disabled />
        </el-form-item>
        <el-form-item label="原计划时间" prop="schedule_date">
            <el-input v-model="ruleForm.schedule_date" />
        </el-form-item>
        <el-form-item label="推迟日期" prop="delay_date">
            <el-date-picker v-model="ruleForm.delay_date" type="date" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="维护方" prop="duty">
            <!-- duty -->
        </el-form-item>
        <el-form-item label="维护人" prop="tpm_id">
            <component :is="userSelect" :data=ruleForm.tpm_id @onUserSelect="onTpmSelect" />
        </el-form-item>
        <el-form-item label="推迟原因" prop="delay">
            <el-input v-model="ruleForm.delay" />
        </el-form-item>
        <el-form-item label="解决措施" prop="measure">
            <el-input v-model="ruleForm.measure" />
        </el-form-item>
        <el-form-item label="协调内容" prop="harmonize">
            <el-input v-model="ruleForm.harmonize" />
        </el-form-item>
        <el-form-item label="协调人" prop="tpm_id">
            <component :is="userSelect" :data=ruleForm.harmonize_id @onTpmSelect="onHarmonizeSelect" />
        </el-form-item>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import userSelect from "@/components/userSelect.vue";
const loading = ref<boolean>(false)

interface RuleForm {
    id: number
    type:string
    project_id:number //项目名称 
    schedule_date:string
    schedule_id:number //进度名称/工序名称
    tpm: string //维护方
    tpm_id: number //维护人
    delay: string //推迟原因
    delay_date:string
    measure:string
    harmonize_id:number
    harmonize:string
    created_at: string //提交时间
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id: 0,
    type:'',
    project_id:0,
    schedule_id:0,
    schedule_date:'',
    tpm: '',
    tpm_id: 0,
    delay: '',
    delay_date:'',
    measure:'',
    harmonize_id:0,
    harmonize:'',
    created_at: '',
})


const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    ruleForm.value = props.data
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    project_id: [
        { required: true, message: '请选择项目', trigger: 'blur' },
    ],
    delay_date: [
        { required: true, message: '请选择推迟时间', trigger: 'blur' },
    ],
    tpm_id: [
        { required: true, message: '请选择维护人', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.value)
            saveUser()            
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onHarmonizeSelect = (data:number) => {
    ruleForm.value.harmonize_id = data
}
const onTpmSelect = (data:number) => {
    ruleForm.value.tpm_id = data
}

const saveUser = () => {
    emit('saveUser')
}

const emit = defineEmits(['saveUser'])
</script>
<style scoped>
</style>
